import { createVNode, render } from 'vue'
import xtxConfirm from './xtx-confirm.vue'

// 准备div
const divNode = createVNode('div', { calss: 'xtx-confirm' })
render(divNode, document.body)

// 获取dom节点
const div = divNode.el

// 导出函数可通过调用confirm()函数动态创建xtxConfirm组件
export default ({ title, text }) => {
  return new Promise((resolve, reject) => {
    // 点击确认按钮，触发resolve同时销毁组件
    const confirmCallback = () => {
      render(null, div)
      resolve()
    }
    // 点击取消按钮，触发reject同时销毁组件
    const cancelCallback = () => {
      render(null, div)
      reject(new Error('点击取消'))
    }

    // 动态创建组件
    const vNode = createVNode(xtxConfirm, {
      title,
      text,
      confirmCallback,
      cancelCallback
    })
    render(vNode, div)
  })
}
